<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>图书管理</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <style>
        .main{
            width:100%;
            height:100%;
            /* background:red;*/
            display:flex;
            flex-wrap: wrap;
            flex-direction:row;
            justify-content: start;
        }
        .query-div{
            display:flex;
            flex-wrap: wrap;
            flex-direction:row;
            justify-content: start;
        }
        .left-menu{
            width:12%;
            height: 90%;
            /*background:yellow;*/
        }
        .right-content{
            width: 85%;
            height:80%;
            margin-left: 32px;
            align-content: center;
            /*   background:blue;*/
        }
        .top-head-color{
            background-color: #50afeb ;

        }

    </style>
</head>
<body>
<%--顶部--%>
<nav class="navbar navbar-default top-head-color" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">图书馆管理系统</a>
        </div>
        <ul class="nav navbar-nav navbar-right">
            <li ><a disabled="disabled"><span class="glyphicon glyphicon-user "></span> 欢迎您，${user.name}</a></li>
            <li ><a href="${pageContext.request.contextPath}/logoutServlet"><span class="glyphicon glyphicon-log-out"></span> 注销</a></li>
        </ul>
    </div>
</nav>
<div class="main">
<%--    左侧菜单栏--%>
    <div class="left-menu">
        <ul class="nav nav-pills nav-stacked">
            <li class="active"><a href="${pageContext.request.contextPath}/bookListServlet">图书管理</a></li>
            <li><a href="${pageContext.request.contextPath}/getUserList">读者管理</a></li>
            <li><a href="${pageContext.request.contextPath}/bookTypeList">图书分类管理</a></li>
            <li><a href="${pageContext.request.contextPath}/bookBorrowListServlet">图书借阅信息</a></li>
            <li><a href="${pageContext.request.contextPath}/bookAlreadyReturnedListServlet">图书归还信息</a></li>
            <li ><a href="${pageContext.request.contextPath}/bookBorrowReturnedHistoryListServlet">查询图书日志</a></li>
        </ul>
    </div>
<%--    <div style="background-color: #9d9d9d;width: 0.5px;height: 90%"></div>--%>
<%--    右侧--%>
    <div class="right-content">
        <div class="query-div">
            <div class="col-lg-7 form-group">

                <form action="${pageContext.request.contextPath}/queryBookListServlet" method="post">
                    <div class="col-lg-8">
                        <input class="form-control"  name="queryBookName" placeholder="查询书名称" type="text" value="">
                    </div>
                    <input type="submit" class="btn btn-primary" id="query" data-toggle="modal" value="查询" />
                </form>
            </div>
            <div class="col-lg-3 form-group">
                <button type="button" class="btn btn-primary" id="btn_add" data-toggle="modal" data-target="#addModal">添加图书</button>
            </div>
        </div>

        <table class="table table-bordered table-hover">
            <thead>
            <tr>
                <th>图书号</th>
                <th>图书类型</th>
                <th>图书名称</th>
                <th>作者名称</th>
                <th>出版社</th>
                <th>总数量</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach items="${bookList}" var="book" varStatus="status">
                <tr>
                    <td>${book.card}</td>
                    <td>${book.type}</td>
                    <td>${book.name}</td>
                    <td>${book.autho}</td>
                    <td>${book.press}</td>
                    <td>${book.num}</td>
                    <td>
                        <button type="button" class="btn btn-warning btn-xs" data-toggle="modal" data-target="#updateModal"
                         onclick="updateBookInfo('${book.card}','${ book.name}','${book.autho}','${book.press}','${book.type}','${book.num}','${book.bid}')"
                                id="btn_update" >修改</button>
                        <button type="button" class="btn btn-danger btn-xs" onclick="deleteBookById('${book.bid}')">删除</button>
                        <button type="button" class="btn btn-info btn-xs" onclick="borrowRecord('${book.bid}')">借阅记录</button>
                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>

</div>

<!-- 修改模态框（Modal） -->
<form class="form-horizontal" method="post" action="updateBookServlet">   <!--保证样式水平不混乱-->
    <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="updateModalLabel">
                        修改图书信息
                    </h4>
                </div>
                <div class="modal-body">

                    <!---------------------表单-------------------->
                    <div class="form-group">
                        <label for="firstname" class="col-sm-3 control-label">图书号</label>
                        <div class="col-sm-7">
                            <input type="hidden" id="updateBookId" name="updatebid">
                            <input type="text" class="form-control" id="updateISBN" name="card"  placeholder="请输入书号">
                            <label class="control-label" for="updateISBN" style="display: none;"></label>
                        </div>
                    </div>


                    <div class="form-group">
                        <label for="firstname" class="col-sm-3 control-label">图书名称</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="updateBookName" name="name"  placeholder="请输入图书名称">
                            <label class="control-label" for="updateBookName" style="display: none;"></label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="firstname" class="col-sm-3 control-label">图书类型</label>
                        <div class="col-sm-7">
                            <select class="form-control" id="updateBookType" name="type" onPropertyChange="showValue(this.value)">
                                <option value="-1">请选择</option>
                                <c:forEach items="${bookTypeList}" var="bookType">
                                 <option value="${bookType.name}" >${bookType.name}</option>
                                </c:forEach>
                            </select>
                            <label class="control-label" for="updateBookType" style="display: none;"></label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="firstname" class="col-sm-3 control-label">作者名称</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="updateAutho" name="autho" placeholder="请输入作者名称">
                            <label class="control-label" for="updateAutho" style="display: none;"></label>
                        </div>
                    </div>


                    <div class="form-group">
                        <label for="firstname" class="col-sm-3 control-label">出版社</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="updatePress" name="press"  placeholder="请输入出版社">
                            <label class="control-label" for="updatePress" style="display: none;"></label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="firstname" class="col-sm-3 control-label">总数量</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="updateNum" name="num"  placeholder="请输入总数量">
                            <label class="control-label" for="updatePress" style="display: none;"></label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button type="submit" class="btn btn-primary" >
                        修改
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</form>

<!--------------------------------------添加的弹框------------------------>
<form class="form-horizontal" method="post" action="addBookServlet">   <!--保证样式水平不混乱-->
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        添加新图书
                    </h4>
                </div>
                <div class="modal-body">

                    <!---------------------表单-------------------->

                    <div class="form-group">
                        <label for="firstname" class="col-sm-3 control-label">图书号</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="addISBN" required="required" name="card" placeholder="请输入书号">
                            <label class="control-label" for="addISBN" style="display: none;"></label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="firstname" class="col-sm-3 control-label">图书名称</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="addBookName" required="required" name="name"  placeholder="请输入图书名称">
                            <label class="control-label" for="addBookName" style="display: none;"></label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="firstname" class="col-sm-3 control-label">图书类型</label>
                        <div class="col-sm-7">
                            <select class="form-control" id="addBookType" name="type">
                                <option value="无分类">请选择</option>
                                <c:forEach items="${bookTypeList}" var="bookType">
                                    <option value="${bookType.name}" >${bookType.name}</option>
                                </c:forEach>
                            </select>
                            <label class="control-label" for="addBookType" style="display: none;"></label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="firstname" class="col-sm-3 control-label">作者名称</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="addAutho" required="required" name="autho"  placeholder="请输入作者名称">
                            <label class="control-label" for="addAutho" style="display: none;"></label>
                        </div>
                    </div>


                    <div class="form-group">
                        <label for="firstname" class="col-sm-3 control-label">出版社</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="addPress" required="required" name="press"  placeholder="请输入出版社">
                            <label class="control-label" for="addPress" style="display: none;"></label>
                        </div>
                    </div>


                    <div class="form-group">
                        <label for="firstname" class="col-sm-3 control-label">总数量</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="addNum" required="required" name="num" placeholder="请输入图书总数量">
                            <label class="control-label" for="addNum" style="display: none;"></label>
                        </div>
                    </div>



                    <!---------------------表单-------------------->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button type="submit" class="btn btn-primary" >
                        添加
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

</form>
<!--------------------------------------添加的模糊框------------------------>

<script>
    //点击修改
    function updateBookInfo(card,name,autho,press,type,num,bid) {
        document.getElementById("updateISBN").value = card;
        document.getElementById("updateBookName").value =name;
        document.getElementById("updateAutho").value = autho;
        document.getElementById("updatePress").value =press;
        document.getElementById("updateBookType").value =type;
        document.getElementById("updateNum").value = num;
        document.getElementById("updateBookId").value =bid;
    }

    //点就删除
    function deleteBookById(bookId){
        con=confirm("是否删除?");
        if(con==true){
            location.href = "${pageContext.request.contextPath}/deleteBookByIdServlet?bid="+bookId;
        }
    }

    function borrowRecord(bookId){
        location.href = "${pageContext.request.contextPath}/borrowRecordListServlet?bookId="+bookId;
    }



</script>





</body>
</html>
